<div class="normal-wrapper-box flex-layout" *ngIf="!isEditMode">
  <div class="normal-wrapper">
    <span [style.width]="buttonMarginLeft" class="font-style">{{ labelCurrent | translate }}</span>
    <span>{{(originScheduleType ? 'SCHEDULE.'+ originScheduleType.toUpperCase(): "") | translate}}</span>
    <a [hidden]="originScheduleType!==SCHEDULE_TYPE.HOURLY" href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
        <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
        <span class="tooltip-content">{{'CONFIG.TOOLTIP.HOURLY_CRON' | translate}}</span>
    </a>
    <a [hidden]="originScheduleType!==SCHEDULE_TYPE.WEEKLY" href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
        <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
        <span class="tooltip-content">{{'CONFIG.TOOLTIP.WEEKLY_CRON' | translate}}</span>
    </a>
    <a [hidden]="originScheduleType!==SCHEDULE_TYPE.DAILY" href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
        <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
        <span class="tooltip-content">{{'CONFIG.TOOLTIP.DAILY_CRON' | translate}}</span>
    </a>
    <span [hidden]="originScheduleType!==SCHEDULE_TYPE.CUSTOM">{{ "SCHEDULE.CRON" | translate }} :</span>
    <span [hidden]="originScheduleType!==SCHEDULE_TYPE.CUSTOM">{{ oriCron }}</span>
  </div>
  <button [style.margin-left]="buttonMarginLeft" [disabled]="disabled" class="btn btn-primary " (click)="editSchedule()" id="editSchedule">
    {{ "BUTTON.EDIT" | translate }}
  </button>
</div>
<div class="setting-wrapper flex-layout" *ngIf="isEditMode">
  <span [style.width]="buttonMarginLeft" class="font-style">{{ labelEdit | translate }}</span>
  <div class="select select-schedule clr-select-wrapper">
    <select  name="selectPolicy" id="selectPolicy" [(ngModel)]="scheduleType">
      <option [value]="SCHEDULE_TYPE.NONE">{{'SCHEDULE.NONE' | translate}}</option>
      <option [value]="SCHEDULE_TYPE.HOURLY">{{'SCHEDULE.HOURLY' | translate}}</option>
      <option [value]="SCHEDULE_TYPE.DAILY">{{'SCHEDULE.DAILY' | translate}}</option>
      <option [value]="SCHEDULE_TYPE.WEEKLY">{{'SCHEDULE.WEEKLY' | translate}}</option>
      <option [value]="SCHEDULE_TYPE.CUSTOM">{{'SCHEDULE.CUSTOM' | translate}}</option>
    </select>
  </div>
  <span class="required" [hidden]="scheduleType!==SCHEDULE_TYPE.CUSTOM">{{ "SCHEDULE.CRON" | translate }}</span>
  <div [hidden]="scheduleType!==SCHEDULE_TYPE.CUSTOM" class="cron-input">
    <label for="targetCron" aria-haspopup="true" role="tooltip" [class.invalid]="dateInvalid" class="tooltip tooltip-validation tooltip-md tooltip-top-left cron-label">
      <input type="text" (blur)="blurInvalid()" (input)="inputInvalid()" name=targetCron id="targetCron" #cronStringInput="ngModel" required class="clr-input form-control"
        [(ngModel)]="cronString">
      <span class="tooltip-content" *ngIf="dateInvalid">
        {{'TOOLTIP.CRON_REQUIRED' | translate }}
      </span>
    </label>
    <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right top-7 cron-tooltip">
        <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
        <div class="tooltip-content table-box">
            <cron-tooltip></cron-tooltip>
        </div>
    </a>
  </div>
  <div class="confirm-button">
    <button [style.margin-left]="buttonMarginLeft" class="btn btn-primary "
    (click)="save()" id="config-save">
    {{ "BUTTON.SAVE" | translate }}
    </button>
    <button class="btn btn-primary " (click)="isEditMode=false">
      {{ "BUTTON.CANCEL" | translate }}
    </button>
  </div>
</div>
